<template>
	<view class="detail">
		<!-- #ifdef APP-PLUS || MP-->
		<app-plus-bar />
		<!-- #endif -->
		<uni-nav-bar :fixed="true" title="机构详情" :shadow='false' color="#fff" background-color="#0AAFFF" right-icon="location"
		 left-icon="back" @click-left="_handleLeft" @click-right="_handleRight">
		</uni-nav-bar>
		<view class="top-banner">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.src"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 顶部选项卡 -->
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabBars" :key="item.id" class="nav-item" :class="{current: index === tabCurrentIndex}"
			 :id="'tab'+index" @click="changeTab(index)">{{item.name}}
			</view>
		</scroll-view>
		<swiper :current="tabCurrentIndex" class="swiper-box" :duration="300" @change="changeSwiper">
			<swiper-item v-for="(tab,index1) in tabBars" :key="index1">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower">
					<detail-content v-if='tabCurrentIndex == 0' :detailData='detailData' />
					<content-list v-if='tabCurrentIndex == 1 || tabCurrentIndex == 2 || tabCurrentIndex == 3' :contentList='contentList' />
					<fqas v-if='tabCurrentIndex == 4' />
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import detailContent from '@/components/detailContent.vue'
	import contentList from '@/components/contentList.vue'
	import fqas from '@/components/fqas.vue'
	import appPlusBar from '@/components/appPlusBar.vue'

	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			uniNavBar,
			uniIcon,
			detailContent,
			contentList,
			fqas,
			appPlusBar
		},
		data() {
			return {
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				indicatorDots: true,
				autoplay: true,
				clientNumber: '394,8638',
				interval: 2000,
				duration: 500,
				swiperList: [{
						src: 'http://www.qunaxue.net/images/news/190424181134.png'
					},
					{
						src: 'http://www.qunaxue.net/images/news/190117140730.jpg'
					},
					{
						src: 'http://www.qunaxue.net/images/news/190508103124.jpg'
					}
				],
				tabBars: [{
					name: '简介',
					id: '1',
				}, {
					name: '课程',
					id: '2'
				}, {
					name: '活动',
					id: '3'
				}, {
					name: '教室',
					id: '4'
				}, {
					name: '问答',
					id: '5'
				}, ],
				detailData: {
					title: 'keepaaaaaa校区',
					imgUrl: 'http://www.qunaerxue.cn/uploads/advs/201803161324453659.jpg',
					address: '上海市上市上海市上海市上海市上海市篮球馆',
					seeNum: '9999',
					phoneNum: '1008610086',
					commentList: [{
							avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png',
							nickName: 'xxx网友',
							time: '08/10 08:12',
							content: '很酷的HBuilderX和uni-app，开发一次既能生成小程序，又能生成App'
						},
						{
							avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png',
							nickName: 'xxx网友',
							time: '08/10 08:12',
							content: '很酷的HBuilderX和uni-app，开发一次既能生成小程序，又能生成App'
						},
					],
					schoolList: [{
						title: "幸福",
						address: '浦东新区',
						content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情能和心爱的人一起睡觉，是件幸福的事情"
					}, {
						title: "幸福",
						address: '浦东新区',
						content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情能和心爱的人一起睡觉，是件幸福的事情"
					}, {
						title: "幸福",
						address: '浦东新区',
						content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情能和心爱的人一起睡觉，是件幸福的事情"
					}],
					toolbar: [{
							name: '收藏',
							icon: 'star',
							id: 1
						},
						{
							name: '分享',
							icon: 'redo',
							id: 2
						},
						{
							name: '咨询',
							icon: 'chatboxes',
							id: 3
						},
					],
					traffic: '地铁10好线。。。。。',
					introduction: '上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆上海市上市上海市上海市上海市上海市篮球馆'
				},
				contentList: [{
						type: 1,
						title: "幸福1",
						address: '浦东新区',
						content: {
							currMoney: '99',
							oldMoney: '199',
							discount: '5.0折',
							studyTime: '2'
						},
					},
					{
						type: 2,
						title: "木屋1",
						address: '浦东新区',
						content: {
							studyTime: '50',
							contentText: '适合9-10周岁'
						},
					},
					{
						type: 3,
						title: "CBD1",
						address: '浦东新区',
						content: {
							studyTime: '50',
							contentText: '适合9-10周岁啊啊啊啊啊啊啊'
						},
					}
				]
			}
		},
		computed: {},
		async onLoad() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
		},
		onReady() {},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			_handleLeft() {
				uni.navigateBack()
			},
			_handleRight() {
				uni.navigateTo({
					url: `/pages/map/map`
				})
			},
			async changeSwiper(e) {
				let index = e.target.current;
				console.log(index)
				this.tabCurrentIndex = index;
				// 	if (this.newsitems[index].data.length === 0) {
				// 		this.addData(index)
				// 	}
				// 	if (this.isClickChange) {
				// 		this.tabIndex = index;
				// 		this.isClickChange = false;
				// 		return;
				// 	}
				// 	let tabBar = await this.getElSize("tab-bar"),
				// 		tabBarScrollLeft = tabBar.scrollLeft;
				// 	let width = 0;
				// 
				// 	for (let i = 0; i < index; i++) {
				// 		let result = await this.getElSize(this.tabBars[i].id);
				// 		width += result.width;
				// 	}
				// 	let winWidth = uni.getSystemInfoSync().windowWidth,
				// 		nowElement = await this.getElSize(this.tabBars[index].id),
				// 		nowWidth = nowElement.width;
				// 	if (width + nowWidth - tabBarScrollLeft > winWidth) {
				// 		this.scrollLeft = width + nowWidth - winWidth;
				// 	}
				// 	if (width < tabBarScrollLeft) {
				// 		this.scrollLeft = width;
				// 	}
				// 	this.isClickChange = false;
				// 	this.tabIndex = index; //一旦访问data就会出问题
			},
			//tab切换
			async changeTab(e) {
				console.log(e)

				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}

				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;


					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					if (this.tabCurrentIndex !== 0 && tabItem.loaded !== true) {
						// this.loadNewsList('add');
						tabItem.loaded = true;
					}
				}, 300)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.detail {
		background-color: #f8f8f8;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.top-banner {
		display: flex;
		flex-direction: column;
		height: 300upx;

		.swiper {
			height: 100%;

			swiper-item {
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	/* 顶部tabbar */
	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;

		.nav-item {
			display: inline-block;
			width: 150upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #303133;
			position: relative;

			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #007aff;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}

		.current {
			color: #007aff;

			&:after {
				width: 50%;
			}
		}
	}

	.scroll-Y {
		height: 100%;
	}

	.swiper-box {
		width: 100%;
		height: calc(100% - 390upx);
		/*  #ifdef  MP  */
		height: calc(100% - 580upx);
		/*  #endif  */
	}
</style>
